<template>
  <span class="el-icon-full-screen"></span>
</template>

<script>
export default {
  data: function() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggle: function() {
      if (this.isOpen) {
        this.exitfullscreen();
      } else {
        this.enterfullscreen();
      }
      this.isOpen = !this.isOpen;
    },
    enterfullscreen: function enterfullscreen() {
      //进入全屏
      var docElm = document.documentElement;
      //W3C
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      }
      //FireFox
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      }
      //Chrome等
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }
      //IE11
      else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
    },

    exitfullscreen: function() {
      //退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
  }
};
</script>

<style scoped>
i {
  font-weight: bold;
}
</style>